<template>
    <div class="custom-page">
        <div class="custom-page-left">
            <div class="tree-title">部门总览</div>
            <el-tree :data="tree.data" :props="tree.defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="custom-page-right">
            <div class="custom-page-right-flex-header">
                <div class="flex-left">
                    <!-- 自己加点击事件 -->
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button type="primary" @click="edit">编辑</el-button>
                    <el-popconfirm
                        title="此操作将删除当前部门及其所有子项，是否继续？"
                        confirmButtonText="确定"
                        cancelButtonText="再考虑一下"
                        @confirm="del"
                    >
                        <template #reference>
                            <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div class="flex-right">
                    <el-input v-model="query.name" class="search-input-class" placeholder="数据项名称" />
                    <el-button type="primary" @click="loadData">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
            <div class="list-content">
                <el-table
                    ref="datagrid"
                    :data="table.data"
                    border
                    @row-click="handleClickTableRow"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <!-- 修改列 -->
                    <el-table-column prop="code" label="部门编码" />
                    <el-table-column prop="oaCode" label="OA编码" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column prop="group" label="分组编码" />
                </el-table>
            </div>
            <div class="list-footer">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.pagination.currentPage"
                    :page-sizes="table.pagination.pageSizes"
                    :page-size="table.pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="table.pagination.total"
                ></el-pagination>
            </div>
            <el-dialog
                title="部门"
                v-model="showDialog"
                width="400px"
                :lock-scroll="true"
                :close-on-click-modal="false"
                destroy-on-close
            >
                <div class="dialog-content">
                    <div class="menu-form">
                        <div class="form-item">
                            <div class="label-class">上级部门</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.pName"
                                    class="form-input-class"
                                    placeholder="选择左侧分类树带出"
                                    readonly
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">OA系统编码</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.oaCode"
                                    class="form-input-class"
                                    placeholder="请输入OA系统编码"
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">部门名称</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.name"
                                    class="form-input-class"
                                    placeholder="请输入部门名称"
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">分组编码</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.group"
                                    class="form-input-class"
                                    placeholder="请输入部门名称"
                                ></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="showDialog = false">取 消</el-button>
                        <el-button type="primary" @click="onSubmit">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/http.js'
import treeUtil from '@/utils/tree.js'
import formatUtil from '@/utils/format.js'

export default {
    // 修改组件名称
    name: 'Department',
    setup() {
        const router = useRouter()
        const route = useRoute()
        const datagrid = ref(null)

        const state = reactive({
            // 修改查询参数
            query: {
                oaCode: '',
                name: ''
            },
            table: {
                data: [],
                selected: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
            tree: {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                currentNode: null
            },
            form: {
                id: '',
                pId: '',
                pName: '',
                code: '',
                oaCode: '',
                name: '',
                sortIndex: 1
            },
            showDialog: false,
            showTreeDialog: false
        })

        const handleSelectionChange = (val) => {
            state.table.selected = val
        }

        const handleSizeChange = (val) => {
            state.table.pagination.pageSize = val
            loadData()
        }

        const handleCurrentChange = (val) => {
            state.table.pagination.currentPage = val
            loadData()
        }

        const handleClickTableRow = (row) => {
            datagrid.value.clearSelection()
            datagrid.value.toggleRowSelection(row)
        }

        const loadData = () => {
            // 修改查询参数
            let params = {
                oaCode: state.query.oaCode,
                name: state.query.name,
                pId: '',
                page: state.table.pagination.currentPage,
                pageSize: state.table.pagination.pageSize
            }
            // 修改请求地址
            http.fetchForm({
                url: '/bas/department/queryGrid',
                method: 'get',
                data: params
            }).then((res) => {
                state.table.data = res.data.grid
                state.table.pagination.total = res.data.total
            })
        }

        const reset = () => {
            state.query.oaCode = ''
            state.query.name = ''
            loadData()
        }

        const handleNodeClick = (res) => {
            state.tree.currentNode = res
            // loadData(res.id);
        }

        const loadTreeData = () => {
            http.fetchForm({
                url: '/bas/department/queryTreeList',
                method: 'get',
                data: {
                    pId: ''
                }
            }).then((res) => {
                state.tree.data = treeUtil.generateDepartmentTreeData('', res.data)
            })
        }

        const add = () => {
            if (state.tree.currentNode != null) {
                state.form.id = ''
                state.form.pId = state.tree.currentNode.id
                state.form.pName = state.tree.currentNode.label
                state.form.code = state.tree.currentNode.code
                state.form.oaCode = ''
                state.form.name = ''
                state.form.group = ''
                state.form.sortIndex = 1
                state.showDialog = true
            } else {
                ElNotification({
                    title: '提示',
                    message: '请选择节点后再添加字典项',
                    type: 'info'
                })
            }
        }

        const edit = () => {
            let selected = state.table.selected
            if (selected.length == 0) {
                ElNotification({
                    title: '提示',
                    message: '请选择要删除的字典项',
                    type: 'info'
                })
                return
            }

            state.form.id = selected[0].id
            state.form.pId = selected[0].pId
            state.form.pName = selected[0].pName
            state.form.code = selected[0].code
            state.form.oaCode = selected[0].oaCode
            state.form.name = selected[0].name
            state.form.group = selected[0].group
            state.form.sortIndex = selected[0].sortIndex
            state.showDialog = true
        }

        const del = () => {
            let selected = state.table.selected
            if (selected.length == 0) {
                ElNotification({
                    title: '提示',
                    message: '请选择要删除的字典项',
                    type: 'info'
                })
                return
            }
            http.fetchForm({
                url: '/bas/department/deleteByCode',
                method: 'post',
                data: {
                    code: selected[0].code
                }
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                })
                loadData()
                loadTreeData()
            })
        }

        const onSubmit = () => {
            let params = state.form
            http.fetchJson({
                url: '/bas/department/save',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '保存成功',
                    type: 'success'
                })
                state.showDialog = false
                loadData()
                loadTreeData()
            })
        }

        onMounted(() => {
            loadData()
            loadTreeData()
        })

        return {
            ...toRefs(state),
            formatUtil,
            datagrid,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            handleClickTableRow,
            loadData,
            reset,
            handleNodeClick,
            add,
            edit,
            del,
            onSubmit
        }
    }
}
</script>
<style scoped>
.custom-page {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.custom-page-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    height: 100%;
    padding: 10px;
    border-right: 1px solid #eee;
    overflow: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.tree-title {
    padding: 10px;
    font-size: 14px;
    color: #464c5b;
    font-weight: bold;
}

:deep(.el-tree-node__content) {
    height: 30px;
}

:deep(.el-tree-node__label) {
    font-size: 12px;
}

.custom-page-right {
    position: absolute;
    top: 0;
    left: 220px;
    right: 0;
    bottom: 0;
    height: 100%;
}

.custom-page-right-flex-header {
    width: 100%;
    padding: 20px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
}

.search {
    display: flex;
}

.search-input-class {
    width: 180px;
    margin-right: 10px;
}

.list-content {
    padding: 10px 10px 0 10px;
}

.list-footer {
    padding: 10px;
}

.dialog-content {
    padding: 10px 20px;
}

.label-class {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #657180;
    font-weight: bold;
}

.content-class {
    width: 100%;
    padding: 0 0 10px 0;
}

.form-input-class {
    width: 100%;
}
</style>
